<!DOCTYPE html>
<html>
<head>

    <meta charset="UTF-8">
    <title>我的工作</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <link rel="stylesheet" href="http://at.alicdn.com/t/font_604068_mskca9dc7wcm1jor.css"/>

    <script src="/static/js/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery-weui/1.2.0/js/jquery-weui.min.js"></script>
    <script src="/static/js/vue.js"></script>

    <link rel="stylesheet" href="/static/jquery-weui/css/weui.min.css">
    <link rel="stylesheet" href="/static/jquery-weui/css/jquery-weui.css">
    <link rel="stylesheet" href="/static/jquery-weui/css/demos.css">

    <script src="/static/jquery-weui/js/jquery-2.1.4.js"></script>
    <script src="/static/jquery-weui/js/fastclick.js"></script>

    <script src="/static/jquery-weui/js/jquery-weui.js"></script>
    <link href="/static/mui/css/mui.css" rel="stylesheet"/>
    <style>

        .weui-navbar__item.weui-bar__item--on {
            color: #fe8200;
            background-color: #f1f1f1;
        }

        button {
            background-color: #ffffff;
            color: black;
            border: 1px solid #fe8200;
            width: 60px;
            height: 30px;
            border-radius: 5px;
        }

        .workerBox1 {
            margin-top: 50px;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            width: 100%;
            overflow: auto;

        }

        .headTitle {
            position: fixed;
            border: 1px solid #f4f4f4;
            border-top: none;
            border-left: none;
            border-right: none;
            background: #fff;
            width: 100%;
            height: 44px;
            line-height: 44px;
        }

        .head {
            position: absolute;
            width: 100%;
            max-width: 640px;
            right: 0;
            margin: 0 auto;
            height: 44px;
            background: rgb(255, 255, 255);
            top: 0;
            left: 0;
            z-index: 3;
        }

        .head .title1 {
            text-align: center;
            font-size: 17px;
            margin: 0 8%;
            font-style: normal;
            font-weight: normal;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            height: 100%;

        }

        .head a img {
            float: left;
            display: block;
            width: 100%;
            width: 10px;
            height: 16px;
            margin-left: 5%;
            margin-top: 14px;
        }

        .sousuo {
            position: absolute;
            top: 0px;
            right: 4%;
            color: black
        }

        .weui-navbar__item:after {
            content: " ";
            position: absolute;
            right: 0;
            top: 0;
            width: 1px;
            bottom: 0;
            border-right: 0px solid #ccc;
            color: #ccc;
            -webkit-transform-origin: 100% 0;
            transform-origin: 100% 0;
            -webkit-transform: scaleX(.5);
            transform: scaleX(.5);
        }

        /*头部背景去除*/
        .weui-navbar__item.weui-bar__item--on {
            color: #fe8200;
            background-color: #ffffff;
        }

        .list_word {
            color: #999999;
            font-size: 13px;
        }

        .list_word1 {
            color: #000;
            font-size: 13px;
        }
    </style>

</head>

<body>


<header class="head headTitle" style="position: fixed;top: 0px;">
    <a class="back" href="{:url('/home/my/my')}"><img src="/static/images/back_gray.png"></a>
    <!--<a href="{:url('/home/worker/sousuo')}" class="sousuo"><span class="icon icon-sousuo"></span></a>-->
    <h6 class="title1" style="line-height: 44px">我的工作</h6>


</header>
<div class="weui-tab" style="margin-top: 45px">

    <div class="weui-tab__bd" id="app" style="background:rgb(239,239,244);">

        <!--&lt;!&ndash;抢单大厅&ndash;&gt;-->
        <!--<div id="tab1" class="weui-tab__bd-item weui-tab__bd-item&#45;&#45;active">-->
            <!--<section class="workerBox1">-->

                <!--<div v-for="(item,index) in items"-->
                     <!--style=" margin-top: 5px;   height: 100px;clear: both;background: #ffffff;">-->
                    <!--<div style="height: 100px;border-bottom: 0.01rem solid #f4f4f4;">-->
                        <!--<a style="color: black"  onclick="stage(this)"  :data_id="item.id">-->
                            <!--<div style="width:35%;float: left;margin-left: 2%">-->
                                <!--<img style="width: 90%;height: 90px;padding: 5px" :src="item.project_picture">-->
                            <!--</div>-->

                            <!--<div style="  width: 45%;float: left;padding: 5px;">-->

                                <!--<div class="mui-row" style="margin-top: 5px">-->
                                    <!--<div class="mui-col-xs-5 list_word">工程阶段：</div>-->
                                    <!--<div class="mui-col-xs-7 list_word1">{{item.title}}</div>-->
                                    <!--<div class="mui-col-xs-5 list_word">客户名称：</div>-->
                                    <!--<div class="mui-col-xs-7 list_word1">{{item.client | setCount}}</div>-->
                                    <!--<div class="mui-col-xs-5 list_word">开始时间：</div>-->
                                    <!--<div class="mui-col-xs-7 list_word1">{{item.start_time}}</div>-->
                                <!--</div>-->
                            <!--</div>-->

                            <!--&lt;!&ndash;<div style="width: 15%;float: left;position: relative">&ndash;&gt;-->
                                <!--&lt;!&ndash;<a style="position: absolute;top: 55px">&ndash;&gt;-->
                                    <!--&lt;!&ndash;<button>抢单</button>&ndash;&gt;-->
                                <!--&lt;!&ndash;</a>&ndash;&gt;-->
                            <!--&lt;!&ndash;</div>&ndash;&gt;-->
                        <!--</a>-->
                    <!--</div>-->


                <!--</div>-->


                <!--<div class="weui-loadmore" v-if="is_loading" style="padding-bottom:30px;height:20px;">-->
                    <!--<i class="weui-loading"></i>-->
                    <!--<span class="weui-loadmore__tips">正在加载</span>-->
                <!--</div>-->

                <!--<div class="weui-cells__title" v-if="is_none" style="text-align: center;margin-bottom: 20px">无更多数据</div>-->

            <!--</section>-->
        <!--</div>-->
        <!--抢单中-->
        <div id="tab2" class="weui-tab__bd-item weui-tab__bd-item--active  ">
            <section class="workerBox1">
                <div v-for="(item,index) in items"
                     style=" margin-top: 5px;   height: 100px;clear: both;background: #ffffff;">
                    <div style="height: 100px;border-bottom: 0.01rem solid #f4f4f4;">
                        <a href="#" style="color: black">
                            <div style="width:35%;float: left;margin-left: 2%">
                                <img style="width: 90%;height: 90px;padding: 5px" :src="item.project_picture">
                            </div>

                            <div style="  width: 45%;float: left;padding: 5px;">

                                <div class="mui-row" style="margin-top: 5px">
                                    <div class="mui-col-xs-6 list_word">工程阶段：</div>
                                    <div class="mui-col-xs-6 list_word1">{{item.title}}</div>
                                    <div class="mui-col-xs-6 list_word">客户名称：</div>
                                    <div class="mui-col-xs-6 list_word1">{{item.name | setCount}}</div>
                                    <div class="mui-col-xs-6 list_word">开始时间：</div>
                                    <div class="mui-col-xs-6 list_word1">{{item.start_time}}</div>
                                </div>
                            </div>

                            <div style="width: 15%;float: left;position: relative">
                                <a style="position: absolute;top: 5px">
                                   <span style="color:#fe8200 ;font-size: 12px">抢单中</span>
                                </a>
                            </div>
                        </a>
                    </div>


                </div>
                <div class="weui-loadmore" v-if="is_loading" style="padding-bottom:30px;height:20px;">
                    <i class="weui-loading"></i>
                    <span class="weui-loadmore__tips">正在加载</span>
                </div>

                <div class="weui-cells__title" v-if="is_none" style="text-align: center;margin-bottom: 20px">无更多数据
                </div>

            </section>


        </div>
        <!--进行中-->
        <div id="tab3" class="weui-tab__bd-item">
            <section class="workerBox1">

                <div v-for="(item,index) in items"
                     style="height: 140px;clear: both;background: #ffffff;margin-top: 5px">
                    <div style="height: 100px;border-bottom: 0.01rem solid #f4f4f4;" >
                        <a  style="color: black" >
                            <div style="width:35%;float: left;">
                                <img style="width: 90%;height: 90px;padding: 5px"
                                     :src="item.project_picture">
                            </div>
                            <div style="  width: 45%;float: left;padding: 5px;">

                                <div class="mui-row" style="margin-top: 5px">
                                    <div class="mui-col-xs-6 list_word">工程阶段：</div>
                                    <div class="mui-col-xs-6 list_word1">{{item.title}}</div>
                                    <div class="mui-col-xs-6 list_word">客户名称：</div>
                                    <div class="mui-col-xs-6 list_word1">{{item.name | setCount}}</div>
                                    <div class="mui-col-xs-6 list_word">开始时间：</div>
                                    <div class="mui-col-xs-6 list_word1">{{item.start_time}}</div>
                                </div>
                            </div>
                        </a>
                        <div style="width: 15%;float: left;position: relative">

                            <span style="position: absolute;top: 5px;color:#fe8200 ;font-size: 12px;right: 5px">进行中</span>

                            <!--<a style="position: absolute;top: 55px">-->
                                <!--<button>签到</button>-->
                            <!--</a>-->
                        </div>
                    </div>
                    <div style="height: 40px;line-height: 40px;margin-top: 5px">
                        <a  style="float: right;margin-right: 10px">
                            <input  onclick="qd(this)" id="qd" style="width: 80px;height: 30px;border: 1px solid #fe8200" :data_id="item.id"   type="button" value="签到"></input>
                        </a>


                        <a  style="float: right;margin-right: 10px;">

                            <input v-if="item.ys_status==0" type="button"     onclick="ys(this)"   id="ys"   :data_id="item.id" style="width: 80px;height: 30px;border: 1px solid #fe8200" value="申请验收" ></input>
                            <input v-if="item.ys_status==1"    type="button"  :data_id="item.id" style="width: 80px;height: 30px;border: 1px solid #fe8200" value="等待验收" ></input>

                        </a>


                    </div>
                </div>

                <div class="weui-loadmore" v-if="is_loading" style="padding-bottom:30px;height:20px;">
                    <i class="weui-loading"></i>
                    <span class="weui-loadmore__tips">正在加载</span>
                </div>

                <div class="weui-cells__title" v-if="is_none" style="text-align: center;margin-bottom: 20px">无更多数据
                </div>

            </section>
        </div>
        <!--已完成-->
        <div id="tab4" class="weui-tab__bd-item">
            <section class="workerBox1">
                <div v-for="(item,index) in items"
                     style="height: 100px;clear: both;background: #ffffff;margin-top: 5px">
                    <div style="height: 100px;border-bottom: 0.01rem solid #f4f4f4;">
                        <a href="#" style="color: black">
                            <div style="width:35%;float: left;margin-left: 2%">
                                <img style="width: 90%;height: 90px;padding: 5px" :src="item.project_picture">
                            </div>

                            <div style="  width: 45%;float: left;padding: 5px;">

                                <div class="mui-row" style="margin-top: 5px">
                                    <div class="mui-col-xs-6 list_word">工程阶段：</div>
                                    <div class="mui-col-xs-6 list_word1">{{item.title}}</div>
                                    <div class="mui-col-xs-6 list_word">客户名称：</div>
                                    <div class="mui-col-xs-6 list_word1">{{item.name | setCount}}</div>
                                    <div class="mui-col-xs-6 list_word">开始时间：</div>
                                    <div class="mui-col-xs-6 list_word1">{{item.start_time}}</div>
                                </div>
                            </div>
                        </a>
                        <div style="width: 15%;float: left;position: relative">

                            <span style="position: absolute;top: 5px;color:#fe8200 ;font-size: 12px;right: 5px">已完成</span>

                            <a style="position: absolute;top: 55px"     onclick="delete1(this)"     :data_id="item.id" >
                                <button>删除</button>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="weui-loadmore" v-if="is_loading" style="padding-bottom:30px;height:20px;">
                    <i class="weui-loading"></i>
                    <span class="weui-loadmore__tips">正在加载</span>
                </div>

                <div class="weui-cells__title" v-if="is_none" style="text-align: center;margin-bottom: 20px">无更多数据
                </div>

            </section>
        </div>
    </div>


    <div class="weui-navbar" style="position: fixed;top: 44px ;background: #ffffff;border: 1px  solid  #f4f4f4">
        <a onclick="stat1(3)" class="weui-navbar__item  weui-bar__item--on " href="#tab2">
            抢单中
        </a>
        <a onclick="stat1(2)" class="weui-navbar__item" href="#tab3">
            进行中
        </a>
        <a onclick="stat1(1)" class="weui-navbar__item" href="#tab4">
            已完成
        </a>

    </div>
</div>

<script>

    //    以下为参考示例
    var app = new Vue({
        el: '#app',
        data: {
            //初始化
            items: [],
            is_loading: false,
            is_none: false,
            is_none1: false,
            is_none2: false,
            is_none3: false,
            cur_page: 1,
            limit: 10,
        },
    filters:{
        //过滤器
        setCount:function (value) {

            if(value.length>5){
                return  value.slice(0,5)+"...";
            }
            else{
                return  value;
            }

        }
    }
    });

    var pages = 1;
    var loading = false;  //状态标记
    var flag = 3;
    //滚动加载更多
    $(function () {
        //进入加载页面
        loadlist(flag);
        console.log("loadlist");
    });

    $(".workerBox1").infinite().on('infinite', function () {
        console.log("加载");
        loadlist(flag);
    });

    //ajax加载数据
    function loadlist(flag) {
        console.log("loadlist");
        if (flag == 1) {
            app.is_none = app.is_none1;
        } else if (flag == 2) {
            app.is_none = app.is_none2;
        } else if (flag == 3) {
            app.is_none = app.is_none3;
        }

        if (!app.is_loading && app.is_none != true) {
            app.is_loading = true;
            console.log(app.cur_page + "gg");

            $.post('mywork', {page: app.cur_page, limit: app.limit, flag: flag}, function (res) {
                console.log(app.cur_page + "vhg");
                console.log(res.data);

                app.is_loading = false;
                if (res.count > 0) {
                    app.cur_page++;
                    for (var index in res.data) {
                        app.items.push(res.data[index]);
                        console.log("data");
                    }
//                app.items=res.data;
                } else {

                    app.is_none = true;
                    if (flag == 1) {
                        app.is_none1 = true;
                    } else if (flag == 2) {
                        app.is_none2 = true;
                    } else if (flag == 3) {
                        app.is_none3 = true;
                    }

                }

            });
        }

    }

</script>
<script>
    <!--点击不同状态的titlebar加载不同数据-->
    //    home/Worker/mywork/flag
    function stat1(f) {
        console.log(f);
        flag = f;
        app.cur_page = 1;
        app.limit = 10;
        app.items = [];
        //  console.log(flag);
        // console.log(app.cur_page);
        loadlist(flag);

    }

    //阶段
    function stage(that) {
        var id = $(that).attr('data_id');
        console.log("qqqqq"+id);
        var url = "{:url('bid_detail')}?id=" + id;
        location.href = url;
    }


    function ys(that) {
        var stage_id = $(that).attr('data_id');
        console.log(stage_id);
       if(stage_id) {
            var index = confirm('是否确定申请验收？');
            if(index == true){
                console.log("123");
                $.post('{:url("ys")}', {stage_id: stage_id}, function (res) {
                    console.log("post");
                    if (res.code == 1) {
                        $.toast("申请成功", function() {
                            document.getElementById("ys").value = "等待验收";
                        });
                    }
                });
            }
        }
    }
    function qd(that) {
        var stage_id = $(that).attr('data_id');
        console.log(stage_id);
        if(stage_id) {
                $.post('{:url("signin")}', {stage_id: stage_id}, function (res) {
                    console.log("post");
                    if (res.code == 1) {
                        $.toast("签到成功");
                        document.getElementById("qd").value = "已签到";
                    }
                });

        }
    }

    function delete1(that) {
        var stage_id = $(that).attr('data_id');
        console.log(stage_id);
        if(stage_id) {
            var index = confirm('是否删除？');
            if(index == true){
                console.log("123");
                $.post('{:url("delete")}', {stage_id: stage_id}, function (res) {
                    console.log("post");
                    if (res.code == 1) {
//                        var url = "{:url('/home/Worker/mywork')}";
//                        location.href = url;
                        $.toast("删除成功");


                    }
                });
            }


        }



    }
</script>
</body>


</html>

